<script setup lang="ts">
import { ref, watch, nextTick } from 'vue';
import hljs from 'highlight.js';
import 'highlight.js/styles/github-dark-dimmed.css';

const props = defineProps<{
  content: string;
}>();

const hasHighlighted = ref(false);
const highlightCode = () => {
  if (hasHighlighted.value) return;
  nextTick(() => {
    const codeBlocks = document.querySelectorAll('pre code');
    if (codeBlocks.length > 0) {
      codeBlocks.forEach((block) => {
        if (!block.classList.contains('hljs')) {
          hljs.highlightElement(block as HTMLElement);
        }
      });
      hasHighlighted.value = true;
    }
  });
};
watch(() => props.content, (newContent) => {
  if (newContent && !hasHighlighted.value) {
    highlightCode();
  }
}, { immediate: true });
const refreshHighlight = () => {
  hasHighlighted.value = false;
  highlightCode();
};
defineExpose({
  refreshHighlight
});
</script>

<template>
  <div class="article-content" v-viewer v-html="content" ref="contentRef">
  </div>
</template>

<style lang="less">
.article-content {
  padding: 0 40px 24px;
  font-size: 16px;
  line-height: 1.8;
  color: #2c3e50;
  font-family: 'LXGW WenKai', 'Noto Serif SC', serif;

  // 标题样式
  h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.4;
    margin: 35px 0 15px;
    font-family: 'Noto Sans SC', 'Source Han Sans SC', sans-serif;
  }

  h1 {
    font-size: 1.8em;
    position: relative;
    padding-left: 16px;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 20px;
      background: #60a5fa;
      border-radius: 2px;
    }
  }

  h2 {
    font-size: 1.5em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid #eaecef;
  }

  h3 {
    font-size: 1.25em;
  }

  // 段落样式
  p {
    margin: 16px 0;
    line-height: 1.8;
  }

  // 列表样式
  ul, ol {
    padding-left: 2em;
    margin: 16px 0;

    li {
      position: relative;
      padding: 8px 0;
      color: #374151;
      font-size: 1rem;
      line-height: 1.6;
      border-bottom: 1px dashed #e5e7eb;
      transition: all 0.3s ease;

      &:last-child {
        border-bottom: none;
      }

      &:hover {
        padding-left: 8px;
        color: #60a5fa;
      }
    }
  }

  // 无序列表项前的点
  ul li {
    &::before {
      content: "";
      position: absolute;
      left: -1.5em;
      top: 50%;
      transform: translateY(-50%);
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: #60a5fa;
    }
  }

  // 有序列表样式
  ol {
    counter-reset: item;

    li {
      counter-increment: item;
      position: relative;
      padding: 8px 0 8px 8px;
      color: #374151;
      font-size: 1rem;
      line-height: 1.6;
      border-bottom: 1px dashed #e5e7eb;
      transition: all 0.3s ease;

      &::before {
        content: counter(item);
        position: absolute;
        left: -2em;
        top: 50%;
        transform: translateY(-50%);
        font-size: 13px;
        font-weight: 500;
        color: #60a5fa;
        background: rgba(96, 165, 250, 0.1);
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        border-radius: 50%;  // 改为圆形
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(96, 165, 250, 0.1);  // 添加轻微阴影
      }

      &:last-child {
        border-bottom: none;
      }

      &:hover {
        padding-left: 16px;
        color: #60a5fa;

        &::before {
          color: #fff;
          background: #60a5fa;
          transform: translateY(-50%) scale(1.05);
          box-shadow: 0 3px 6px rgba(96, 165, 250, 0.2);  // 悬停时加深阴影
        }
      }
    }
  }

  // 引用块样式
  blockquote {
    margin: 24px 0;
    padding: 20px 24px;
    background-color: #fafafa;
    border-radius: 12px;
    position: relative;
    overflow: hidden;

    // 添加左侧装饰
    &::before {
      content: '"';
      position: absolute;
      left: -10px;
      top: -20px;
      font-size: 80px;
      font-family: Georgia, serif;
      color: rgba(96, 165, 250, 0.15);
      line-height: 1;
    }

    // 添加右侧装饰
    &::after {
      content: '"';
      position: absolute;
      right: -10px;
      bottom: -50px;
      font-size: 80px;
      font-family: Georgia, serif;
      color: rgba(96, 165, 250, 0.15);
      line-height: 1;
    }

    p {
      margin: 8px 0;
      color: #4b5563;
      font-size: 1rem;
      line-height: 1.75;
      position: relative;
      z-index: 1;

      &:first-child {
        margin-top: 0;
      }

      &:last-child {
        margin-bottom: 0;
      }

      // 添加引号装饰
      &:first-of-type::before {
        content: '—— ';
        color: #9ca3af;
      }
    }

    // 添加微妙的阴影效果
    box-shadow:
      inset 0 2px 4px rgba(0, 0, 0, 0.02),
      0 2px 4px rgba(0, 0, 0, 0.02);
  }

  // 图片样式
  img {
    max-width: 100%;
    height: auto;
    margin: 16px auto;
    display: block;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    cursor: zoom-in;
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    }
  }

  // 链接样式
  a {
    color: #60a5fa;
    text-decoration: none;
    border-bottom: 1px dashed #60a5fa;
    transition: all 0.3s ease;

    &:hover {
      color: #2563eb;
      border-bottom-style: solid;
    }
  }

  code {
    border-radius: 12px;
  }
  // 行内代码样式
  :not(pre) > code {
    padding: 2px 6px;
    margin: 0 2px;
    background-color: #f3f4f5;
    border-radius: 3px;
    font-size: 0.9em;
    color: #e11d48;
  }

  // 分割线样式
  hr {
    margin: 24px 0;
    border: none;
    height: 1px;
    background: linear-gradient(to right, #e5e7eb 0%, #60a5fa 50%, #e5e7eb 100%);
  }

  // 表格样式
  table {
    width: 100%;
    margin: 16px 0;
    border-collapse: collapse;

    th, td {
      padding: 12px;
      border: 1px solid #eaecef;
    }

    th {
      background-color: #f8f9fa;
      font-weight: 600;
    }

    tbody tr {
      transition: background-color 0.3s ease;

      &:nth-child(2n) {
        background-color: #f8f9fa;
      }

      &:hover {
        background-color: #f3f4f6;
      }
    }
  }

  // 打印样式
  @media print {
    // 移除不需要打印的元素
    .no-print {
      display: none !important;
    }

    // 确保文本是黑色的（省墨）
    * {
      color: #000 !important;
      background: transparent !important;
    }

    // 确保图片不会被截断
    img {
      max-width: 100% !important;
      page-break-inside: avoid;
    }

    // 避免代码块被截断
    pre, code {
      white-space: pre-wrap !important;
      word-wrap: break-word !important;
      page-break-inside: avoid;
    }

    // 避免标题被截断
    h1, h2, h3, h4, h5, h6 {
      page-break-after: avoid;
    }

    // 链接显示URL
    a[href]:after {
      content: " (" attr(href) ")";
    }
  }
}
@media (max-width: 768px) {
  .article-content {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (max-width: 576px) {
  .article-content {
    padding-left: 16px;
    padding-right: 16px;
  }
}
</style>
